<template>
	<view class="NewTopicBar">
		<view class="content">
			<view class="item" v-for="(item,index) in attentions" :key="index" @tap="topicClick(index)">
				<view class="head">
					<view class="image">
						<image :src="item.topicIcon" class="img"></image>
					</view>
					<view class="title">
						<view class="titleText">
							{{item.topicName}}
						</view>
						<view class="hot">
							热度·{{item.inviNum}}
						</view>
					</view>
				</view>
				<view class="midText">
					话题介绍：{{item.topicDescr}}
				</view>
				<view class="tail">
					<view class="btn">
						关注
					</view>
				</view>
			</view>
			<view class="item" v-if="attentions.length % 2 == 1">
				<view class="head">
					<view class="image">
						<image src="../../../static/tabbar/map.png" class="img"></image>
					</view>
					<view class="title">
						<view class="titleText">
							{{}}
						</view>
						<view class="hot">
							热度·{{}}
						</view>
					</view>
				</view>
				<view class="midText">
					话题介绍：{{}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'NewTopicBar',
		props:{
			attentions:{
				type:Array,
				default() {
					return []
				}
			}
		},
		methods:{
			topicClick(index) {
				uni.setStorage({
					key: 'topic',
					data: {
						topic: this.attentions[index]
					}
				})
				uni.navigateTo({
					url:'../../pages/topic/TopicDetail?topicId=' + this.attentions[index].topicId
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 0 14.54rpx;
	}
	
	.item {
		position: relative;
		background-color: #FFFFFF;
		width: 48%;
		height: 272.72rpx;
		border-radius: 18.18rpx;
		margin-bottom: 14.54rpx;
	}
	
	.head {
		display: flex;
	}
	
	.image {
		width: 90.9rpx;
		height: 90.9rpx;
		border-radius: 18.18rpx;
		margin: 9.09rpx 14.54rpx;
		background-color: #999999;
	}
	
	.image .img {
		width: 90.9rpx;
		height: 90.9rpx;
		border-radius: 18.18rpx;
	}
	
	.title {
		margin: 9.09rpx 14.54rpx;
	}
	
	.titleText {
		font-size: 32.72rpx;
		padding-top: 9.09rpx;
	}
	
	.hot {
		font-size: 21.81rpx;
		padding-top: 9.09rpx;
	}
	
	.midText {
		font-size: 25.45rpx;
		width: 92%;
		height: 105.45rpx;
		margin: 0 auto;
		-webkit-line-clamp: 3;  
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
	}
	
	.btn {
		background-color: #62A7FF;
		color: #FFFFFF;
		width: 67.27rpx;
		text-align: center;
		border-radius: 36.36rpx;
		float: right;
		margin: 9.09rpx 18.18rpx 0;
		font-size: 18.18rpx;
		line-height: 36.36rpx;
	}
</style>
